<template>
  <div class="title-bar">
    <div class="title">视频标签管理器</div>
    <div class="window-controls">
      <button class="control-button minimize" @click="minimize">
        <span>─</span>
      </button>
      <button class="control-button maximize" @click="toggleMaximize">
        <span>□</span>
      </button>
      <button class="control-button close" @click="close">
        <span>×</span>
      </button>
    </div>
  </div>
</template>

<script setup>
const remote = window.require('@electron/remote')

const minimize = () => {
  remote.getCurrentWindow().minimize()
}

const toggleMaximize = () => {
  const win = remote.getCurrentWindow()
  if (win.isMaximized()) {
    win.unmaximize()
  } else {
    win.maximize()
  }
}

const close = () => {
  remote.getCurrentWindow().close()
}
</script>

<style scoped>
.title-bar {
  height: 32px;
  background: #1a1a1a;
  display: flex;
  align-items: center;
  justify-content: space-between;
  -webkit-app-region: drag;
  user-select: none;
}

.title {
  margin-left: 12px;
  color: #fff;
  font-size: 12px;
}

.window-controls {
  display: flex;
  -webkit-app-region: no-drag;
}

.control-button {
  width: 46px;
  height: 32px;
  border: none;
  background: transparent;
  color: #fff;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.2s;
}

.control-button:hover {
  background: rgba(255, 255, 255, 0.1);
}

.close:hover {
  background: #e81123;
}

.control-button span {
  line-height: 1;
}
</style> 